<template>
  <div>
    <div v-if="category==='table'">
      <q-card class="bg-grey-3">
        <q-card-section class="row justify-between q-pa-md " >
          <div>
            <slot name="header-left">
            </slot>
          </div>
          <div>
            <slot name="header-center"></slot>
          </div>
          <div>
            <slot name="header-right">
              <div>
                <q-btn color="cyan" @click="addData" label="增加数据"></q-btn>
              </div>
            </slot>
          </div>
        </q-card-section>
        <q-card-section>
          <q-markup-table  :style="{background: bgcolor}">
            <thead>
            <tr>
              <th v-for="item in data" :key="item.name">{{item.label}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in cellData" :key="index" >
              <td v-for="(cell) in row" :key="cell.label" style="">
                <div v-if="cell.tag==='input'">
                  <div v-show="cell.show">
                  <q-input v-model="cell.value" :type="cell.type" outlined dense :class="cell.align==='center'?'text-center':cell.align==='left'?'text-left':'text-right'"></q-input>
                  </div>
                </div>
                <div v-else-if="cell.tag === 'select'">
                  <div v-show="cell.show">
                    <div v-if="cell.link">
                      <q-select v-model="cell.value" :options="cell.options" outlined dense :class="cell.align==='center'?'text-center':cell.align==='left'?'text-left':'text-right'" @blur="selectLink(cell)"></q-select>
                    </div>
                    <div v-else>
                      <q-select v-model="cell.value" :options="cell.options" outlined dense :class="cell.align==='center'?'text-center':cell.align==='left'?'text-left':'text-right'"></q-select>
                    </div>
                  </div>
                </div>
                <div v-else-if="cell.tag==='operate'" class="row justify-center">
                  <div @click.capture="recodeIndex(index)">
                    <slot name="operate">
                      操作插槽
                    </slot>
                  </div>
                </div>
                <div v-else-if="cell.tag === 'map'">
                  <slot name="map">
                  </slot>
<!--                  <router-link to="/map" target="_blank">-->
<!--                    <div class="row no-wrap justify-center cursor-pointer" @click="showMap(1)">-->
<!--                      <img alt="mapImg" src="~assets/tianditu.svg" style="width: 5rem;height: 5rem;"/>-->
<!--                      <q-tooltip>-->
<!--                        点击进入地图选点-->
<!--                      </q-tooltip>-->
<!--                    </div>-->
<!--                  </router-link>-->
                </div>
                <div v-else>
                  类型错误
                </div>
              </td>
            </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
        <q-card-section class="row justify-end">
          <div>
            <slot name="footer-left">
            </slot>
          </div>
          <div>
            <slot name="footer-center"></slot>
          </div>
          <div>
            <slot name="footer-right">
            </slot>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <div v-else-if="category==='list'">
      <q-card >
        <q-card-section class="row justify-between">
          <div><slot name="header-left"></slot></div>
          <div><slot name="header-center"></slot></div>
          <div><slot name="header-right"></slot></div>
        </q-card-section>
        <div class="justify-center listInput">
          <div v-for="(item,index) in data" :key="index">
            <q-card v-if="item.tag==='input'" class="inputBox">
              <div v-show="item.show">
                <q-input v-model="item.value" :label="item.label" :type="item.type" outlined dense :class="item.align==='center'?'text-center':item.align==='left'?'text-left':'text-right'"></q-input>
              </div>
            </q-card>
            <q-card v-else-if="item.tag === 'select'" class="selectBox">
              <div v-show="item.show">
                <div v-if="item.link">
                  <q-select v-model="item.value" :label=item.label :options="item.options" outlined dense :class="item.align==='center'?'text-center':item.align==='left'?'text-left':'text-right'" @blur="selectLink(item)"></q-select>
                </div>
                <div v-else>
                  <q-select v-model="item.value" :label="item.label" :options="item.options" outlined dense :class="item.align==='center'?'text-center':item.align==='left'?'text-left':'text-right'"></q-select>
                </div>
              </div>
            </q-card>
            <q-card v-else-if="item.tag === 'file'" class="fileBox">
              <q-file v-model="item.value" :label="item.label" outlined filled dense :multiple="item.isMultiple"></q-file>
            </q-card>
            <q-card v-else-if="item.tag === 'toggle'">
              <div v-show="item.show">
                <q-toggle disabled toggle-indeterminate v-model="item.toggle"></q-toggle>
              </div>
            </q-card>
          </div>
        </div>
        <q-card-section class="row justify-between">
          <div><slot name="footer-left"></slot></div>
          <div><slot name="footer-center"></slot></div>
          <div><slot name="footer-right"></slot></div>
        </q-card-section>
      </q-card>
    </div>
    <div v-else-if="category==='tabs'">
      <q-card style="overflow: scroll;">
        <q-card-section  class="row justify-between">
          <div><slot name="header-left"></slot></div>
          <div><slot name="header-center"></slot></div>
          <div><slot name="header-right"></slot></div>
        </q-card-section>
        <q-card-section class="q-gutter-md scroll-y">
          <q-tabs
            v-model="tabArr[currTab]"
            class="text-teal"
          >
            <q-tab v-for="(item, index) in tabArr" :key="index" :name="item"  :label="item" @click="changeTab(index,item)">
            </q-tab>
          </q-tabs>
          <div>
            <input-component :data="data[currTab].data" :category="'table'" :key="currTab+'$jdjfj'">
              <template #operate>
                <div>
                  <q-btn color="red" label="删除"></q-btn>
                </div>
              </template>
              <template v-if="data[currTab].hasOwnProperty('modules')" #header-left>
                <div class="q-gutter-md">
                  <template v-for="(item, index) in data[currTab].modules" :key="index+'dadde'">
                    <q-btn :label="item.label" color="positive" @click="showModule(index)"></q-btn>
                  </template>
                </div>
              </template>
            </input-component>
            <q-dialog v-model="isShowDialog" maximized persistent>
              <q-card style="width: 70vw;height: 80vh;">
                <q-card-section>
                </q-card-section>
                <q-card-section>
                  <input-component :data="data[currTab].modules[currModule].data" category="table">
                    <template #operate>
                      <div>
                        <q-btn color="red">删除</q-btn>
                      </div>
                    </template>
                    <template #footer-right>
                      <div class="q-gutter-md q-mr-md">
                        <q-btn color="primary" label="确定"></q-btn>
                        <q-btn @click="showModule(0,false)" color="warning" label="取消"></q-btn>
                      </div>
                    </template>
                  </input-component>
                </q-card-section>
              </q-card>
            </q-dialog>
          </div>
        </q-card-section>
        <q-card-section class="row justify-between">
          <div><slot name="footer-left"></slot></div>
          <div><slot name="footer-center"></slot></div>
          <div><slot name="footer-right"></slot></div>
        </q-card-section>
      </q-card>
    </div>
    <div v-else>
      <p class="text-red-5">类型错误</p>
    </div>
  </div>
</template>
<script>
// eslint-disable-next-line
import { defineComponent, ref, onMounted, nextTick } from 'vue'
// import MapComponent from 'components/commonComponent/MapComponent'
export default defineComponent({
  name: 'InputComponent',
  // components: { MapComponent },
  // emits: ['addData'],
  props: {
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    category: { // 要显示的类型
      type: String,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    bgcolor: {
      type: String,
      default: function () {
        return '#FFF'
      }
    }
  },
  setup (props, context) {
    const tabArr = props.category === 'tabs' ? ref(props.data.map(item => {
      return item.label
    })) : []
    const isShowDialog = ref(false) // 控制dialog的显示
    const buttonArr = ref([]) // 当前tab要显示的按钮组
    const currTab = ref(0) // 当前单击的tab页
    const currModule = ref(0) // 当前单击的模块索引
    const cellData = ref([]) // 填入的值
    let propertys = [] //  保存属性名数组
    const isDestroy = ref(true)
    const isShowMap = ref(false)
    const selectLink = function (cell) {
      // console.log(cell)
      const newCell = JSON.parse(JSON.stringify(cell))
      // console.log(newCell)
      const link = newCell.linkData ? newCell.linkData : ['没有linkData', '', '']
      // console.log(link)
      // const index = link[0]
      // console.log(index)
      // const label = link[1]
      // console.log(label)
      // const linkProp = link[2]
      // console.log(linkProp)
      // const data = props.data
      // console.log(data)
      // const linkData = data[1]
      // console.log(linkData)
      context.emit('linkData', { index: link[0], label: link[1], linkProp: link[2], currVal: newCell.value })
      // if (linkData[linkProp].tag === 'input') {
      //   data.forEach(item => {
      //     if (item.label === label) {
      //       item.show = true
      //       item.value = cell.value instanceof Array ? cell.value[0] : cell.value
      //     }
      //   })
      // }
    }
    const showMap = (type) => {
      if (type === 1) {
        isShowMap.value = true
        console.log()
      } else if (type === 0) {
        isShowMap.value = false
      } else {
        console.log('参数错误')
      }
      nextTick(() => {
        console.log(document.getElementById('demo'))
      })
    }
    onMounted(() => {
      if (props.category === 'table') {
        propertys = getProps()
      }
      if (props.data[0].modules) {
        buttonArr.value = props.data.map(item => {
          return item.modules.map(i => i.label)
        })
        console.log(buttonArr.value)
      }
    })
    const showModule = (index = -1, show = true) => { // 控制模块显示
      if (!show) {
        isShowDialog.value = false
      } else {
        currModule.value = index
        isShowDialog.value = true
      }
    }
    const changeTab = (index, item) => { // 修改tab序号
      currTab.value = index
      if (item.hasModules) {
        console.log('aaa')
      }
    }
    const getProps = function () { // 获取属性
      return props.data.map(item => {
        return {
          key: item.field,
          tag: item.tag,
          type: item.type ? item.type : '',
          options: item.options,
          align: item.align,
          value: item.tag === 'select' ? [] : ''
        }
      })
    }
    const addData = function () { // 生成动态celldata
      console.log('aaa')
      cellData.value = [...cellData.value, JSON.parse(JSON.stringify(propertys))]
      console.log('cellData', cellData)
    }
    const recodeIndex = (index) => { // 记录当前点击的索引
      console.log(index)
      cellData.value.splice(index, 1)
    }
    return {
      recodeIndex,
      addData,
      cellData,
      tabArr,
      currTab,
      showModule,
      changeTab,
      isShowDialog,
      currModule,
      showMap,
      isShowMap,
      isDestroy,
      selectLink
    }
  }
})
</script>

<style scoped>
.selectBox{
  width: 25vw;
  margin: 1vh 4vh;
}
.fileBox{
  width: 25vw;
  margin: 1vh 4vh;
}
.inputBox{
  width: 25vw;
  margin: 1vh 4vh;
}
.listInput{
  display: flex;
  flex-wrap: wrap;
}
</style>
